<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | Simple Tables</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../AdminLTE-3.0.5/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="../static/css/optimization.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">Home</a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Messages Dropdown Menu -->

            <!-- Notifications Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-bell"></i>
                    <span class="badge badge-warning navbar-badge">个人操作</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <span class="dropdown-item dropdown-header">操作面板</span>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-envelope mr-2"></i> 个人资料
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-file mr-2"></i> 3 new reports
                        <span class="float-right text-muted text-sm">2 days</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="/admin-api/v1/token?_ajax_method=DELETE" class="dropdown-item dropdown-footer"
                       onclick="logout(this);"
                       data-rest-type="DELETE">退出登录</a>
                </div>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="#" class="brand-link">
            <img src="../AdminLTE-3.0.5/dist/img/AdminLTELogo.png"
                 alt="AdminLTE Logo"
                 class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">vue 学习</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user (optional) -->

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->

                    <li class="nav-header" id="sidebar-menu"></li>

                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>后台资源管理</h1>
                    </div>

                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card" id="table-page">
                        <div class="card-header" id="tests">
                            <!--<h3 class="card-title">Fixed Header Table</h3>-->
                            <a class="btn btn-sm btn-primary" href="add.html">添加</a>
                            <button-counter></button-counter>
                            <div class="card-tools">
                                <div class="input-group input-group-sm" style="width: 150px;">
                                    <input type="text" name="table_search" class="form-control float-right"
                                           placeholder="Search">

                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-default"><i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body table-responsive p-0">
                            <table class="table table-head-fixed text-nowrap">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>系统</th>
                                    <th>上级ID</th>
                                    <th>菜单名</th>
                                    <th>菜单级别</th>
                                    <!--                                    <th>路径</th>-->
                                    <th>url</th>
                                    <th>状态</th>
                                    <th>排序</th>
                                    <th>是否显示</th>
                                    <th>创建人</th>
                                    <th>创建时间</th>
                                    <th>更新人</th>
                                    <th>更新时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="table-body">
                                <tr v-for="item in items">
                                    <td>{{ item.id }}</td>
                                    <td>{{ item.system_id }}</td>
                                    <td>{{ item.parent_id }}</td>
                                    <td>{{ item.name }}</td>
                                    <td>{{ item.level }}</td>
                                    <!--                                    <td>{{ item.path }}</td>-->
                                    <td>{{ item.uri }}</td>
                                    <td>{{ item.status }}</td>
                                    <td>{{ item.order_no }}</td>
                                    <td>{{ item.is_show }}</td>
                                    <td>{{ item.create_uid }}</td>
                                    <td>{{ item.create_time }}</td>
                                    <td>{{ item.update_uid }}</td>
                                    <td>{{ item.update_time }}</td>
                                    <td></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- /.card-body -->
                        <div class="card-footer clearfix mo-paging" id="pagination">
                            <div class="page-bar">
                                <mo-paging
                                        :page-index="currentPage"
                                        :total="count"
                                        :page-size="pageSize"
                                        @change="pageChange">
                                </mo-paging>
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->


    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>

<!--https://segmentfault.com/a/1190000008606958-->
<!--https://blog.csdn.net/weixin_36617251/article/details/86648774-->

<!-- ./wrapper -->
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
    Vue.config.devtools = true
</script>
<style>
    .mo-paging {
        display: inline-block;
        padding: 0;
        margin: 1rem 0;
        font-size: 0;
        list-style: none;
        user-select: none;
    }

    .mo-paging .paging-item {
        display: inline;
        font-size: 14px;
        position: relative;
        padding: 6px 12px;
        line-height: 1.42857143;
        text-decoration: none;
        border: 1px solid #ccc;
        background-color: #fff;
        margin-left: -1px;
        cursor: pointer;
        color: #0275d8;
    }

    .mo-paging .paging-item:first-child {
        margin-left: 0;
    }

    .mo-paging .paging-item:hover {
        background-color: #f0f0f0;
        color: #0275d8;
    }

    .mo-paging .paging-item--disabled {
        background-color: #fff;
        color: #505050;
    }

    .mo-paging .paging-item--more {
        background-color: #fff;
        color: #505050;
    }

    .mo-paging .paging-item--disabled {
        cursor: not-allowed;
        opacity: .75;
    }

    .mo-paging .paging-item--more {
        cursor: default;
    }

    .mo-paging .paging-item--current {
        cursor: default;
    }

    .mo-paging .paging-item--current {
        background-color: #0275d8;
        color: #fff;
        position: relative;
        z-index: 1;
        border-color: #0275d8;
    }
</style>
<script type="text/x-template" id="page-template">
    <ul class="mo-paging">
        <!-- prev -->
        <li
                :class="['paging-item', 'paging-item--prev', {'paging-item--disabled' : index === 1}]"
                @click="prev">prev
        </li>

        <!-- first -->
        <li
                :class="['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]"
                @click="first">first
        </li>

        <li
                :class="['paging-item', 'paging-item--more']"
                v-if="showPrevMore">...
        </li>

        <li
                :class="['paging-item', {'paging-item--current' : index === pager}]"
                v-for="pager in pagers"
                @click="go(pager)">{{ pager }}
        </li>

        <li
                :class="['paging-item', 'paging-item--more']"
                v-if="showNextMore">...
        </li>

        <!-- last -->
        <li
                :class="['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]"
                @click="last">last
        </li>

        <!-- next -->
        <li
                :class="['paging-item', 'paging-item--next', {'paging-item--disabled' : index === pages}]"
                @click="next">next
        </li>
    </ul>
</script>

<script>
    // 分页

    // vue 组件
    // https://cn.vuejs.org/v2/guide/components.html

    // 使用Vue实现一个分页组件
    // https://segmentfault.com/a/1190000008606958

    Vue.component('mo-paging', {
        //通过props来接受从父组件传递过来的值
        props: {

            //页面中的可见页码，其他的以...替代, 必须是奇数
            perPages: {
                type: Number,
                default: 5
            },

            //当前页码
            pageIndex: {
                type: Number,
                default: 1
            },

            //每页显示条数
            pageSize: {
                type: Number,
                default: 10
            },

            //总记录数
            total: {
                type: Number,
                default: 1
            },

        },
        methods: {
            prev() {
                if (this.index > 1) {
                    this.go(this.index - 1)
                }
            },
            next() {
                if (this.index < this.pages) {
                    this.go(this.index + 1)
                }
            },
            first() {
                if (this.index !== 1) {
                    this.go(1)
                }
            },
            last() {
                if (this.index != this.pages) {
                    this.go(this.pages)
                }
            },
            go(page) {
                if (this.index !== page) {
                    this.index = page
                    //父组件通过change方法来接受当前的页码
                    this.$emit('change', this.index)
                }
            }
        },
        computed: {

            //计算总页码
            pages() {
                return Math.ceil(this.size / this.limit)
            },

            //计算页码，当count等变化时自动计算
            pagers() {
                const array = []
                const perPages = this.perPages
                const pageCount = this.pages
                let current = this.index
                const _offset = (perPages - 1) / 2


                const offset = {
                    start: current - _offset,
                    end: current + _offset
                }

                //-1, 3
                if (offset.start < 1) {
                    offset.end = offset.end + (1 - offset.start)
                    offset.start = 1
                }
                if (offset.end > pageCount) {
                    offset.start = offset.start - (offset.end - pageCount)
                    offset.end = pageCount
                }
                if (offset.start < 1) offset.start = 1

                this.showPrevMore = (offset.start > 1)
                this.showNextMore = (offset.end < pageCount)

                for (let i = offset.start; i <= offset.end; i++) {
                    array.push(i)
                }

                return array
            }
        },
        data() {
            return {
                index: this.pageIndex, //当前页码
                limit: this.pageSize, //每页显示条数
                size: this.total || 1, //总记录数
                showPrevMore: false,
                showNextMore: false
            }
        },
        watch: {
            pageIndex(val) {
                this.index = val || 1
            },
            pageSize(val) {
                this.limit = val || 10
            },
            total(val) {
                this.size = val || 1
            }
        },
        // https://cn.vuejs.org/v2/guide/render-function.html
        template: '#page-template'
    })
</script>

<script>
    // 一个可行方案
    // https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-component-blog-post-example
    // vm = new Vue({
    //     el: '#table-body',
    //     data() {
    //         return {
    //             items: [
    //             ]
    //         }
    //     },
    //     mounted() {
    //         // axios.get('/admin-api/v1/menu').then(function (response) {
    //         //         console.log(response)
    //         //         for (var key in response.data.data.list) {
    //         //             console.log(key)
    //         //             console.log(response.data.data.list[key])
    //         //             console.log(this)
    //         //             this.items.push(response.data.data.list[key])
    //         //         }
    //         //     }
    //         // ).catch(function (error) {
    //         //     console.log(error);
    //         // });
    //
    //         axios.get('/admin-api/v1/menu').then(response=>(
    //             this.items = response.data.data.list
    //             )
    //         ).catch(function (error) {
    //             console.log(error);
    //         });
    //     }
    // })
    // new Vue({el: '#tests'})

    vm = new Vue({
        el: '#table-page',
        data() {
            return {
                pageSize: 20, //每页显示20条数据
                currentPage: 1, //当前页码
                count: 1, //总记录数
                items: []
            }
        },

        methods: {
            //获取数据
            getList() {
                //模拟
                let url = `/admin-api/v1/menu/?psize=${this.pageSize}&page=${this.currentPage}`
                getResponseData(url).then(res => {
                    console.log(res)
                    //子组件监听到count变化会自动更新DOM
                    this.count = res.data.total
                    this.items = res.data.list
                })
            },

            //从page组件传递过来的当前page
            pageChange(page) {
                this.currentPage = page
                this.getList()
            }
        },
        mounted() {
            //请求第一页数据
            this.getList()
        }
    })

    console.log(vm)

    function getResponseData(url) {
        return axios.get(url)
            .then(response => {
                return response.data
            })
    }

    // getResponseData().then(res => {
    //     vm.items = res.data.list
    //     vm.total = res.data.total
    // })



</script>


</body>
</html>
